import React, { memo, useEffect, useState } from 'react'

const Home = memo(function (props) {
  useLogLife('Home')
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  )
})

const About = memo(function (props) {
  useLogLife('About')
  return (
    <div>
      <h1>About Page</h1>
    </div>
  )
})

function useLogLife(cName = 'App') {
  useEffect(() => {
    console.log(cName + '组件被创建')
    return () => {
      console.log(cName + '组件被销毁')
    }
  }, [cName])
}

export default memo(function App() {
  const [isShow, setIsShow] = useState(true)
  useLogLife('App')
  return (
    <div>
      <h2>App Page</h2>
      <button onClick={(e) => setIsShow(!isShow)}>显示/隐藏</button>
      {isShow && <Home />}
      {isShow && <About />}
    </div>
  )
})
